<template>
  <el-container style="height: 600px; border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(276, 241, 246)">
      <el-menu :default-openeds="['1']" router style="background-color: #CCCCCC
">
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-message"></i>系统设置
          </template>
          <el-menu-item index="/user">用户管理</el-menu-item>
          <el-menu-item index="/role">角色管理</el-menu-item>
          <el-menu-item index="1-3">部门管理</el-menu-item>
          <el-menu-item index="1-4">字典管理</el-menu-item>
          <el-menu-item index="1-5">参数定义</el-menu-item>
          <el-submenu index="1-4">
            <template slot="title">选项4</template>
            <el-menu-item index="1-4-1">选项4-1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-menu"></i>导航二
          </template>
          <el-menu-item-group>
            <template slot="title">分组一</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组2">
            <el-menu-item index="2-3">选项3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="2-4">
            <template slot="title">选项4</template>
            <el-menu-item index="2-4-1">选项4-1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-setting"></i>导航三
          </template>
          <el-menu-item-group>
            <template slot="title">分组一</template>
            <el-menu-item index="3-1">选项1</el-menu-item>
            <el-menu-item index="3-2">选项2</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <el-dropdown>
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>通知中心</el-dropdown-item>
            <el-dropdown-item>退出登录</el-dropdown-item>
            <el-dropdown-item>设置</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span>胡敏</span>
      </el-header>

      <el-main>
        <el-tabs
          v-model="activeIndex"
          type="card"
          closable
          @tab-click="tabClick"
          v-if="options.length"
          @tab-remove="tabRemove"
        >
          <el-tab-pane
            :key="item.route"
            v-for="(item, index) in options"
            :label="item.name"
            :name="item.route"
          >
            <keep-alive>
              <router-view></router-view>
            </keep-alive>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
  </el-container>
</template>

<style>
.el-menu {
  height: 100%;
}
.el-menu-header .el-menu-item,
.el-menu-header .el-submenu {
  float: right;
}
.el-header {
  background-color: #abcdef;
  color: #333;
  line-height: 60px;
}
</style>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    //多标签页切换
    tabClick(tab) {
      let path = this.activeIndex;
      this.$router.replace({ path: path });
    },
    tabRemove(targetName) {
      // 首页不可删除
      if (targetName == "/index") {
        return;
      }
      this.$store.commit("delete_tabs", targetName);
      if (this.activeIndex === targetName) {
        // 设置当前激活的路由
        if (this.options && this.options.length >= 1) {
          this.$store.commit(
            "set_active_index",
            this.options[this.options.length - 1].route
          );
          this.$router.replace({ path: this.activeIndex });
        } else {
          this.$router.replace({ path: "/index" });
        }
      }
    }
  },
  computed: {
    options() {
      return this.$store.state.options;
    },
    activeIndex: {
      get() {
        return this.$store.state.activeIndex;
      },
      set(val) {
        this.$store.commit("set_active_index", val);
      }
    }
  },
  //监听路由 将路由放入全局状态vuex
  watch: {
    $route(to) {
      let flag = false;
      for (let option of this.options) {
        if (option.route === to.path) {
          flag = true;
          this.$store.commit("set_active_index", to.path);
          console.log(this.$store.state.activeIndex);
          break;
        }
      }
      if (!flag) {
        this.$store.commit("add_tabs", { route: to.path, name: to.name });
        this.$store.commit("set_active_index", to.path);
      }
    }
  },
  created() {
    if (this.options.length == 0) {
      this.$store.commit("add_tabs", { route: "/index", name: "首页" });
      this.$store.commit("set_active_index", "/index");
    }
    //解决页面刷新 数据和页面消失
    //在页面加载时读取localStorage里的状态信息
    if (localStorage.getItem("store") ) {
        this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(localStorage.getItem("store"))))
    }

    //在页面刷新时将vuex里的信息保存到localStorage里
    window.addEventListener("beforeunload",()=>{
        localStorage.setItem("store",JSON.stringify(this.$store.state))
    })
  }
};
</script>